<template>
  <div class="home">
    <h2>home views</h2>
    <h2>counter: {{ counterStore.counter }}</h2>
    <h2>counter: {{ counter }}</h2>
    <h2>counterRefs: {{ couterRefs }}</h2>
    <h2>counterStoreToRefs: {{ counterStoreToRefs }}</h2>
    <button @click="incrementCounte">counter+1</button>
  </div>
</template>

<script setup>
import useCounter from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { toRefs } from 'vue'

const counterStore = useCounter()
// 无响应式
const { counter } = counterStore
// 响应式
const { counter: couterRefs } = toRefs(counterStore)
// 响应式
const { counter: counterStoreToRefs } = storeToRefs(counterStore)

function incrementCounte() {
  counterStore.counter++
}
</script>

<style scoped></style>
